<template>
  <div class="home">
    <el-container style="height: 100%; border: 1px solid #eee">


      <el-container>
        <el-header style="text-align: center; font-size: 30px; font-weight: bold">
          <el-dropdown>
            <span>管理员界面</span>
          </el-dropdown>
        </el-header>


        <el-main>
          <el-button style="background-color: #42b983" type="success" @click="add()">新增 </el-button>
          <el-table :data="tableData">
            <el-table-column prop="id" label="ID" >
            </el-table-column>
            <el-table-column prop="grade" label="等级">
            </el-table-column>
            <el-table-column prop="username" label="用户名" width="450">
            </el-table-column>
            <el-table-column prop="password" label="密码" width="450">
            </el-table-column>

            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                    size="mini"
                    @click="handleEdit( scope.row)">编辑</el-button>
                <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete( scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page=pageNum
              :page-sizes="[5, 10, 15, 20]"
              :page-size=pageSize
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
          <el-dialog title="新增" :visible.sync="dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="ID" :label-width="formLabelWidth">
                <el-input v-model="form.id" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="用户名" :label-width="formLabelWidth">
                <el-input v-model="form.username" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="密码" :label-width="formLabelWidth">
                <el-input v-model="form.password" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="等级" :label-width="formLabelWidth">
                <el-input v-model="form.grade" autocomplete="off"></el-input>
              </el-form-item>


            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="confirmAdd()" >确 定</el-button>
            </div>
          </el-dialog>
          <el-dialog title="编辑" :visible.sync="formVisible">
            <el-form :model="form">
              <el-form-item label="ID" :label-width="formLabelWidth">
                <el-input v-model="form.id" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="用户名" :label-width="formLabelWidth">
                <el-input v-model="form.username" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="密码" :label-width="formLabelWidth">
                <el-input v-model="form.password" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="等级" :label-width="formLabelWidth">
                <el-input v-model="form.grade" autocomplete="off"></el-input>
              </el-form-item>


            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="formVisible = false">取 消</el-button>
              <el-button type="primary" @click="saveEdit()" >确 定</el-button>
            </div>
          </el-dialog>

        </el-main>
      </el-container>
    </el-container>
  </div>
</template>



<script>
export default {
  name: 'AdminView',
  data() {

    return {
      tableData: [],
      total:0,
      pageSize:5,
      pageNum:1,
      dialogFormVisible:false,
      formVisible:false,
      formLabelWidth:"100px",
      form:{
        id:'',
        grade:'',
        username:'',
        password:'',

      },
      currentEditingRow:null
    }
  },
  mounted() {
    this.init()
  },
  methods:{
    add() {
      this.dialogFormVisible = true;
      this.form = {}

    },
    init() {
      let params = {}
      params.pageSize = this.pageSize
      params.pageNum = this.pageNum
      this.$http.get("/queryByPage", {params}).then(res => {
        this.tableData =res.data.records
        this.total =res.data.total
        console.log(res)
      })
    },
    confirmAdd(){

      this.$http.post("/add",this.form).then(response => {
        console.log(response)

        if (response.status ===200) {
          this.init();
          this.$message.success("添加成功");

        } else {

          this.$message.error("添加失败：" + response.data.message);
        }
      }).catch(error => {
        console.error("添加数据时发生错误：", error);
        this.$message.error("添加失败，请检查网络连接或稍后重试");
      });
      this.dialogFormVisible = false
      this.init()
    },

    handleSizeChange(val) {
      this.pageSize =val
      this.pageNum =1
      this.init()
    },
    handleCurrentChange(val) {
      this.pageNum =val
      this.init()
    },
    handleDelete(row)
    {
      let params={}
      params.id=row.id
      this.$http.get("/delete",{params}).then(res => {
        this.init()
        this.$message.success("删除成功")
      })
    },
    handleEdit(row)
    {
      this.formVisible = true;
      this.currentEditingRow =row;
      this.form={...row};


    },
    saveEdit(){
      this.$http.post("/update",this.form).then(response => {
        console.log(response)

        this.$message.success("编辑成功");
        this.currentEditingRow=null;
        this.form={}
        this.init();
        this.formVisible = false
      })
    },
  }
}
</script>
<style>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>